<template>
    <div class="content">
        <crumb name="Work Board"></crumb>
        <div class="content">
            <div class="search-wrapper">
                <el-button type="text" @click="type = 1" class="f" :class="type === 1 ? 'active':''">Today</el-button>
                <el-button type="text" @click="type = 2" class="f" :class="type === 2 ? 'active':''">Week</el-button>
                <el-button type="text" @click="type = 3" class="f" :class="type === 3 ? 'active':''">Month</el-button>
                <el-button type="text" @click="type = 4" class="f" :class="type === 4 ? 'active':''">Year</el-button>
                <el-date-picker

                        class="f"
                        v-model="startTime"
                        type="date"
                        placeholder="Start"
                        value-format="yyyy-MM-dd"></el-date-picker>
                <el-date-picker
                        v-model="endTime"

                        class="f"
                        type="date"
                        placeholder="End"
                        value-format="yyyy-MM-dd"></el-date-picker>
                <el-button type="success" class="f" @click="getWorkByPeriod">Search</el-button>

            </div>

            <vue-seamless-scroll :data="workList" :class-option="classOption" class="top" id="top">
                <ul class="top-content" v-show="workList.length" id="first">
                    <li class="top-content-item" v-for="item in workList" :key="item.employeeNum">
                        <div class="img">
                            <img :src="item.imageUrl
                             || 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576215842581&di=0dff842b868adce929bf6d499ab51874&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c8415b10ec7aa801212d57334fdc.png%401280w_1l_2o_100sh.png'"
                                 alt="">
                        </div>
                        <div class="text">
                            <div class="name">{{item.employeeName}} / {{item.employeeNum}}</div>
                        </div>
                        <span class="time">{{item.workingTime}}</span>
                    </li>
                </ul>
                <div class="top-content" v-show="!workList.length">
                    <div class="empty">Employee haven't work performance 😿</div>
                </div>
            </vue-seamless-scroll>
            <div class="table-wrapper">
                <el-table
                        :data="workList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="employeeName"
                            label="Name"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="employeeNum"
                            label="No"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="workingTime"
                            label="Time">
                    </el-table-column>
                    <el-table-column
                            prop="workingPrice"
                            label="Salary">
                    </el-table-column>

                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import crumb from '../../components/common/crumb'
    import {employeeWorkBoard} from "../../api/service";
    import {ERROR_OK} from "../../util/config";
    import moment from "moment";

    export default {
        name: "employee-work-board",
        data() {
            return {
                currentScrollHeight: 0,
                specifiedDate: moment().format('YYYY-MM-DD'),
                weekNumber: moment().week(),
                year: moment().year(),
                month: moment().month() + 1,
                startTime: '',
                endTime: '',
                type: 1,
                workList: []
            }
        },
        computed: {
            classOption(){
                return {
                    step:0.5,//数值越大速度滚动越快，更多参数参考官网参数配置
                    // limitMoveNum: 2,// 开始无缝滚动的数据量
                }
            }

        },
        created() {
            this.getwork();

        },
        mounted() {
        },
        beforeDestroy() {
            this.timer && clearInterval(this.timer)
        },
        methods: {
            infiniteScroll() {
                const top = document.getElementById('top');
                const first = document.getElementById('first');
                const second = document.getElementById('second');
                top.scrollTop = 0;
                second.innerHTML = first.innerHTML;
                this.timer = setInterval(() => {
                    if (top.scrollTop >= first.offsetHeight) {
                        top.scrollTop = 0;
                    } else {
                        top.scrollTop++
                    }
                }, 50)
            },
            async getwork() {
                if (this.type === 1) {
                    const {status, data, msg} = await employeeWorkBoard({specifiedDate: this.specifiedDate});
                    if (status === ERROR_OK) {
                        this.workList = data;
                    } else {
                        this.$message.error(msg);
                        this.workList = []
                    }
                }
                if (this.type === 2) {
                    const {status, data, msg} = await employeeWorkBoard({weekNumber: this.weekNumber});
                    if (status === ERROR_OK) {
                        this.workList = data;
                    } else {
                        this.$message.error(msg);
                        this.workList = []
                    }
                }
                if (this.type === 3) {
                    const {status, data, msg} = await employeeWorkBoard({month: this.month, year: this.year});
                    if (status === ERROR_OK) {
                        this.workList = data;
                    } else {
                        this.$message.error(msg);
                        this.workList = []
                    }
                }
                if (this.type === 4) {
                    const {status, data, msg} = await employeeWorkBoard({year: this.year});
                    if (status === ERROR_OK) {
                        this.workList = data;
                    } else {
                        this.$message.error(msg);
                        this.workList = []
                    }
                }
            },
            async getWorkByPeriod() {
                this.type = 0;
                const {status, data, msg} = await employeeWorkBoard({startTime: this.startTime, endTime: this.endTime});
                if (status === ERROR_OK) {
                    this.workList = data;
                } else {
                    this.$message.error(msg);
                    this.workList = []
                }
            }
        },
        watch: {
            type() {
                this.getwork()
            }
        },
        components: {
            crumb,vueSeamlessScroll
        }
    }
</script>

<style scoped lang="scss">
    .top {
        margin: 10px 0;
        position: relative;
        height: 606px;
        overflow: hidden;
        &::after {
            content: '';
            background: url("../../assets/64.jpg") no-repeat;
            background-size: 100% 100%;
            opacity: 0.8;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }
        .top-content {
            .top-content-item {
                position: relative;
                border-top: 1px solid #fff;
                overflow: hidden;
                margin: 0 50px;
                text-align: left;
                height: 100px;
                background: rgba(0, 0, 0, .2);
                line-height: 100px;
                color: white;
                &:nth-child(1) {
                    &::after {
                        content: '';
                        position: absolute;
                        color: white;
                        left: -90px;
                        top: -30px;
                        width: 0;
                        height: 0;
                        border-left: 80px solid transparent;
                        border-right: 80px solid transparent;
                        border-top: 80px solid gold;
                        transform: rotate(135deg);
                    }
                }
                &:nth-child(2) {
                    &::after {
                        content: '';
                        position: absolute;
                        color: white;
                        left: -90px;
                        top: -30px;
                        width: 0;
                        height: 0;
                        border-left: 80px solid transparent;
                        border-right: 80px solid transparent;
                        border-top: 80px solid silver;
                        transform: rotate(135deg);
                    }
                }
                &:nth-child(3) {
                    &::after {
                        content: '';
                        position: absolute;
                        color: white;
                        left: -90px;
                        top: -30px;
                        width: 0;
                        height: 0;
                        border-left: 80px solid transparent;
                        border-right: 80px solid transparent;
                        border-top: 80px solid #B87333;
                        transform: rotate(135deg);
                    }
                }
                .img {
                    margin-left: 40px;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    background: white;
                    display: inline-block;
                    vertical-align: top;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
                .text {
                    margin-left: 30px;
                    width: 50%;
                    display: inline-block;
                    vertical-align: top;
                    .name {
                        width: 50%;
                        display: inline-block;
                        font-size: 20px;
                        font-weight: bold;
                    }
                }
                .time {
                    font-size: 20px;
                    float: right;
                    font-weight: bold;
                }
            }
            .empty {
                font-size: 40px;
                color: white;
                line-height: 600px;
                flex: 1;
            }
        }
    }

    .search-wrapper {
        display: flex;
        margin: 20px 0;
        border: 1px solid #ddd;
        .f {
            flex: 1;
        }
        .active {
            color: lightgreen;
        }
    }

</style>